import axios from "axios";
import React, {useEffect, useState} from 'react';
import './UpdateCourt.css';
import {App, Button, Col, Divider, Flex, Image, Input, List, Row, Space, Spin} from "antd"
import {useNavigate, useParams} from "react-router-dom";
import config from '../utils/config'
import {MultiMarker, TMap} from '@map-component/react-tmap';

function UpdateCourt() {
    const {notification} = App.useApp();
    const navigate = useNavigate();
    const [updateCourt, setUpdateCourt] = useState(null);
    const [court, setCourt] = useState(null);
    const [remark, setRemark] = useState('');
    const params = useParams();

    useEffect(() => {
        axios.get(`${config.serverDomain}tmadmin/courts/update/${params.id}`)
            .then(res => {
                const {updateCourt} = res.data
                setUpdateCourt(updateCourt)
                axios.get(`${config.serverDomain}tmadmin/courts/${updateCourt.courtId}`)
                    .then(courtRes => setCourt(courtRes.data.court))
            })
    }, [])

    //审核通过函数
    const reviewPass = (e) => {
        axios.post(`${config.serverDomain}tmadmin/courts/update/review`, {
            updateId: updateCourt.id,
            pass: true,
            remark
        }).then(res => {
            console.log(res)
            if (res.status === 200) {
                navigate('/')
            } else {
                notification.info({
                    message: res.data
                });
            }
        })
    }
    //审核拒绝函数
    const reviewReject = (e) => {
        if (remark === '') {
            notification.info({
                message: `审核备注不能为空`
            });
            return;
        }
        axios.post(`${config.serverDomain}tmadmin/courts/update/review`, {
            updateId: updateCourt.id,
            pass: false,
            remark
        }).then(res => {
            if (res.status === 200) {
                navigate('/')
            } else {
                notification.info({
                    message: res.data
                });
            }
        })
    }


    if (!court) {
        return <Spin size="large"/>
    } else {
        return <div>
            <h1>更新球场申请</h1>
            <Row>
                <Col span={12}>
                    <OneCourt court={court}/>
                </Col>
                <Col span={12}>
                    <OneCourt court={updateCourt}/>
                </Col>
            </Row>
            <Divider/>

            <div style={{marginBottom: '10px'}}>
                <div className='title'>审核备注</div>
                <Input placeholder="会在微信消息里展示给用户，通过时可不填" value={remark} onChange={e => setRemark(e.target.value)}/>
            </div>
            <Flex justify="center">
                <Space>
                    <Button type="primary" onClick={reviewPass}>审核通过</Button>
                    <Button danger onClick={reviewReject}>审核拒绝</Button>
                </Space>
            </Flex>
        </div>
    }
}

function OneCourt({court}) {
    let mapStyle = {height: '300px', width: '400px'}
    if (window.innerWidth < 1000) {
        mapStyle = {height: '150px', width: '150px'}
    }

    return <div style={{margin: '0px 20px'}}>
        <CourtInfo title="球场名" desc={court.name}/>
        <CourtInfo title="球场地址" desc={
            <div>
                <div>{court.addressName}</div>
                <TMap
                    style={mapStyle}
                    scale={0.5}
                    mapKey="7F7BZ-V3Y3H-77ND7-W4MSU-UQDY6-TUFJG" // The applied key
                    center={{lat: court.latitude, lng: court.longitude}} // set the center point coordinates
                    control={{
                        scale: false,
                        rotate: false,
                    }}
                >
                    <MultiMarker
                        id={court.id}
                        geometries={[
                            {
                                position: {lat: court.latitude, lng: court.longitude}
                            }
                        ]}
                    />
                </TMap>
            </div>
        }/>
        <CourtInfo title="订场方式" desc={court.bookType}/>
        <CourtInfo title="订场联系" desc={court.bookContact}/>
        {court.bookType == "小程序订场" ? <CourtInfo title="小程序链接" desc={court.bookLink}/> : null}
        <CourtInfo title="场地类型" desc={court.courtTypes.join('，')}/>
        <CourtInfo title="场地配套" desc={court.courtFacilities.join('，')}/>

        <CourtInfo title="收费参考" desc={<List
            bordered
            dataSource={court.charges}
            renderItem={(item) => (
                <List.Item>
                    <List.Item.Meta
                        title={
                            <div>{item.day1}至{item.day2} {item.time1}-{item.time2}</div>
                        }
                        description={
                            <div>{item.courtType} {item.fee}元</div>
                        }
                    />
                </List.Item>
            )}
        />}/>

        <CourtInfo title="场地图片" desc={court.images.map(img => <Image
            key={img}
            width={150}
            src={config.ftpDomain + img}
            fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />)}/>
    </div>
}

function CourtInfo({title, desc}) {
    return <div>
        <div className="title">
            {title}
        </div>
        <div className="desc">
            {desc}
        </div>
    </div>
}

export default UpdateCourt;
